<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 分页的大小</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<!--.pagination添加该 class 来在页面上显示分页。-->
		<ul class="pagination pagination-lg">
			<li><a href="#">&laquo;</a></li>
			<!--.active 当前访问页面链接样式-->
			<li class="active"><a href="#">1</a></li>
			<!--.disabled	禁用链接-->
			<li class="disabled"><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&raquo;</a></li>
		</ul><br>
		<!--.pagination-sm	更小尺寸的分页链接-->
		<ul class="pagination pagination-sm">
			<li><a href="#">&laquo;</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&raquo;</a></li>
		</ul>
		<!--.pager添加该 class 来获得翻页链接。-->
		<ul class="pager">
			<!--使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。-->
		    <li class="previous"><a href="#">&larr;Previous</a></li>
		    <!--.disabled添加该 class 来获得一个颜色变淡的外观。-->
		    <li class="next disabled"><a href="#">Next&rarr;</a></li>
		</ul>
	</div>
</body>
</html>